テキスト : WebブラウザにおけるJavaScript
JavaScriptとは？
軽量なインタプリタ型プログラミング言語
参考 : https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript
JavaScriptの目的
動きのある（動的な）Webサイトを作る。
※ 近年はWebブラウザ以外にもデスクトップアプリ等で利用されるようになってきているので一概には言えない。
プログラミング言語の分類
動的型付け（←→静的型付け）
インタプリタ型（←→コンパイル型）
MEMO
Q. JavaとJavaScriptって関係があるか？
A. ない。全くない。巷では「メロンとメロンパンくらい違う」と言われている。
触ってみよう
デスクトップに「study」というフォルダを作成
（既に作成ずみの場合は飛ばしてください）
↓
「study」フォルダの中に「js」というフォルダを作成
↓
「js」フォルダの中に「hellojs1.html」という名前でファイルを作成
↓
VScodeで「study」フォルダを開く
CUI
code:console
$ mkdir study
$ cd study
$ mkdir js
$ cd js
$ touch hellojs.html
$ code ../
htmlファイルの作成方法
→ テキスト : HTMLを参照
code:hellojs1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- titleの　中身を変更 -->
<title>Hello Js</title>
</head>
<body>
<!-- ↓を追加 -->
<button onclick="alert('Hello Js')">Hello Js</button>
</body>
</html>
JavaScriptの書き方
上記は「イベントハンドラ」(後述)というものに直接JavaScriptのコードを書いている。
上記「onclick」は後々消去できる。
onclickの中身を別の場所に書くことも可能。
インラインスクリプト
code:hellojs2.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Js</title>
<!-- scriptタグの中に処理を記述 -->
<script>
function greet() {
alert('Hello Js');
}
</script>
</head>
<body>
<button onclick="greet()">Hello Js</button>
</body>
</html>
※ scriptタグをbodyタグの最後に持ってくる場合もあります。
外部スクリプト
JSファイルを作成し、HTMLファイルから参照する。
code:hellojs3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- scriptタグからファイルを参照 -->
<script src="hellojs.js"></script>
<title>Hello Js</title>
</head>
<body>
<button onclick="greet()">Hello Js</button>
</body>
</html>
※ こちらもscriptタグをbodyタグの最後に持ってくる場合もあります。
code:hellojs.js
function greet() {
alert('Hello Js');
}
※ 一旦、このページ上では、インラインスクリプトで記載します。
コンソールログについて
code:consolelog.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コンソールログの確認</title>
<script>
console.log("コンソールログ");
</script>
</head>
<body>
<h3>画面を開いたら、F12をクリック。</h3>
<h3>または右クリックで「検証」をクリックしてコンソール画面を表示してください</h3>
</body>
</html>
開発者ツールを開いて、「Console」を見ると、
「console.log」の中で記載した文言が出てくる。
https://gyazo.com/73889d977a26a22ad23ad8020a1599e2
また、コンソール画面に直接JavaScriptを記入して実行することができます。
→ インタプリタ言語の特徴。
イベントハンドラ
サンプル
ファイル名 : eventhandler.html
code:eventhandler.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event handler</title>
</head>
<body>
<button onclick="console.log('onclick')">button1</button><br>
<button ondblclick="console.log('ondblclick')">button2</button><br>
<button onMouseOver="console.log('onMouseOver')">button3</button>
</body>
</html>
それぞれのイベントとコンソールメッセージの表示のされ方を確認してみてください。
イベントハンドラの参考
https://pentan.info/javascript/event_handler.html
※ 全くの初心者の場合は、別の補足が必要
基本的処理記述について
code:jssample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Sample</title>
<script>
// 変数
// 変化のない値
const pi = 3.14;
const explanation = '円周率';
const border = '---------------';
// 変化のある値(以前は「var」で書いていた)
let viewText = '初期値';
console.log('(1) 変数について');
console.log(viewText);
viewText = explanation + ' : ' + pi;
console.log(viewText);
console.log(border);
// 配列
const array = 1,5,8,10
console.log('(2) 配列について');
// JavaScriptの配列は0番目から
console.log(array0);
console.log(border);
// while文
let i = 0;
console.log('(3) while文');
while(i < 5){
console.log('while文の中身 : ' + (i+1) + '回目');
// インクリメント
i++;
}
console.log(border);
// for文
console.log('(4) for文でarrayの中身を表示');
for(let j = 0; j < array.length; j++) {
console.log(arrayj);
}
console.log(border);
// if文
console.log('(5) ageが20以上だったら「成人済み」と表示。違うなら「未成年」と表示');
const age = 27;
console.log('age = ' + age);
if(age >= 20) {
console.log('成人済み');
} else {
console.log('未成年');
}
</script>
</head>
<body>
<h1>結果はコンソール画面で確認</h1>
</body>
</html>
補足
文字列を指定するときはシングルクォーテーション or ダブルクォーテーションで囲む（どちらかには統一すべき）
変数名 : キャメルケース
array.lengthで配列の大きさ（長さ）を取得できる
エクササイズ
変数arrayに1,2,3,4,5,6,7,8,9,10を順番に入れた配列を作成し、「5」をコンソールに表示させてください。
arrayの中の値を全て足し合わせて、コンソールに表示させてください。
→プログラミングの最初の関門!
arrayの中で偶数のみ足し合わせて、コンソールに表示させてください。
補足
code:sample.js
const val = 10;
// % 剰余の計算
if( val % 2 === 0 ) {
// 10なので、今回は「even」が表示される。
console.log('even');
} else {
console.log('odd');
}
#JavaScript
#テキスト